<template>
  <view class="generate-quantity">
    <wd-card title="提示词">
      <view class="flex justify-around gap-3">
        <view
          v-for="item in promptTabs"
          :key="item.value"
          class="tab-item"
          :class="item.value === currentTab ? 'item_active' : ''"
          @tap="onChangeTab(item.value)"
        >
          {{ item.label }}
        </view>
      </view>

      <wd-textarea v-model="prompt" :placeholder="placeholders" />

      <view class="flex mt-2 gap-2">
        <text>提示词优化</text>
        <wd-switch v-model="cueWordObj.promptOptimation" active-color="#c13432" size="32rpx" />
      </view>
    </wd-card>
  </view>
</template>
<script lang="ts" setup>
import { PromptEnum } from "@/utils/enums";
import { useWorkflowStore } from "@/store/index";
import { storeToRefs } from "pinia";

const { cueWordObj } = storeToRefs(useWorkflowStore());
const promptTabs = [
  {
    label: "正向提示词",
    value: PromptEnum.POSITIVE_PROMPT,
  },
  {
    label: "负向提示词",
    value: PromptEnum.NEGATIVE_PROMPT,
  },
];
const currentTab = ref(PromptEnum.POSITIVE_PROMPT);
const placeholders = computed(() => {
  if (currentTab.value === PromptEnum.POSITIVE_PROMPT) {
    return "仅需简单输入具体内容即可，如:城市场景，高层办公楼，灰色金属立面，诺曼福斯特；不需输入通用且重复累赘的内容，如:高质量，8K，高清";
  } else {
    return "可不填，若填写仅需简单输入具体内容即可，如不希望画面中出现人群或某种紫色的材质，可输入：人群，紫色";
  }
});

const onChangeTab = (item: PromptEnum) => {
  currentTab.value = item;
};

const prompt = computed({
  get() {
    return currentTab.value === PromptEnum.POSITIVE_PROMPT
      ? cueWordObj.value.prompt
      : cueWordObj.value.negativePrompt;
  },
  set(newValue: string) {
    // 根据currentTab的值更新对应的数据
    if (currentTab.value === PromptEnum.POSITIVE_PROMPT) {
      cueWordObj.value.prompt = newValue;
    } else {
      cueWordObj.value.negativePrompt = newValue;
    }
  },
});
</script>
<script lang="ts">
// 取消小程序样式隔离
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.generate-quantity {
  position: relative;

  .tab-item {
    position: relative;
    display: flex;
    gap: 16rpx;
    padding: 8rpx 16rpx;
    font-size: 28rpx;
    color: #333333;
    border: 2rpx dashed rgba(51, 51, 51, 0.7);
    border-radius: 16rpx;
    transition: all 0.2s linear;
  }

  .item_active {
    color: #c13432;
    background: #f3d6d6;
    border: 2rpx solid #c13432;
  }
  :deep(.wd-card) {
    padding-bottom: 24rpx;
  }
  :deep(.wd-textarea) {
    padding: 0;
    margin-top: 24rpx;
    background-color: #f6f6f7;
  }
}
</style>
